/**
 * @ Author: @紫衣小生
 * @ Email: 15227974559@163.com
 * @ Create Time: 2023-01-04 17:07:55
 * @ Modified by: --
 * @ Modified time: 2023-01-29 10:37:57
 * @ Keywords: webpack config
 * @ Description: 这是一个基础的 webpack 配置
 * 
 * 满足了如下功能：
 * 1- 一个 devServer 的配置，启动一个服务，并热更新预览代码，配置 host 和 port
 * 2- 一个 webpack 打包构建的规则
 *  a- HtmlWebpackPlugin 可以在html中不引用js文件，在打包完成后，由webpack添加进去
 *  b- style-loader & css-loader支持对 css 文件的解析
 *  c- 自定义项目的路径，如本项目在 ./views/modules/cut-image 下的 v3
 * 
 * 使用 webpack 的好处：
 * 1- 一套代码兼容多个版本的浏览器
 * 2- 可以使用比较熟悉的 export/import 语法结构互相引用资源
 * 3- 使用 export/import 语法带来的作用与空间，避免造成全局污染
 * 4- 上线版本保护源码
 * 5- 压缩后的代码体积更小，优化加载速度
 */

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')

module.exports = {
  devServer: {
    static: {
      directory: resolve(__dirname, './views/modules/cut-image/v3/dist'),
    },
    compress: true,
    host: 'local.zy.com', // 配置 host
    port: 8081,
    open: true,
  },

  // 使用 development 模式时，可以查看加密转码之前的代码，开发人员还是能看懂
  // 使用 production 模式时，则是转码之后的代码
  mode: 'development', // 模式

  entry: './views/modules/cut-image/v3/index.js',

  output: {
    filename: 'index.js',
    path: resolve(__dirname, './views/modules/cut-image/v3/dist'),
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './views/modules/cut-image/v3/index.html',
    }),
  ],

  module: {
    rules: [
      {
        test: /\.css$/, // css结尾的文件
        use: [
          'style-loader', // 创建爱你style标签，将js中的样式资源插入，添加到head
          'css-loader', // 将css文件变成commentjs模块加载js中，内容是字符串
        ],
      },
    ],
  },
}
